﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<link rel="shortcut icon" href="../Content/images/favicon.ico" />
	<title>登录 - 后台管理系统</title>
	<meta name="description" content="后台管理系统" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="../Content/plugins/ace/assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../Content/plugins/ace/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../Content/plugins/ace/assets/css/fonts.googleapis.com.css" />
	<link rel="stylesheet" href="../Content/plugins/ace/assets/css/ace.min.css" />
	<!--[if lte IE 9]>
    <link rel="stylesheet" href="../Content/plugins/ace/assets/css/ace-part2.min.css" />
    <![endif]-->
	<link rel="stylesheet" href="../Content/plugins/ace/assets/css/ace-rtl.min.css" />
	<link rel="stylesheet" href="../Content/plugins/toastr-2.1.1/toastr.css" />
	<!--[if lte IE 9]>
    <link rel="stylesheet" href="../Content/plugins/ace/assets/css/ace-ie.min.css" />
    <![endif]-->
	<!--[if lte IE 8]>
    <script src="../Content/plugins/ace/assets/js/html5shiv.min.js"></script>
    <script src="../Content/plugins/ace/assets/js/respond.min.js"></script>
    <![endif]-->
	<style type="text/css">
		.login-margin-top {
			margin-top: 150px;
		}
	</style>
</head>

<body class="login-layout light-login">
	<div class="main-content">
		<div class="login-container login-margin-top">
			<div id="login-box" class="login-box visible widget-box no-border">
				<div class="widget-body">
					<div class="widget-main">
						<h4 class="header blue lighter bigger">
							登&nbsp;录
						</h4>
						<div class="space-6"></div>
						<label class="block clearfix">
							<span class="block input-icon input-icon-right">
								<input type="text" class="form-control" placeholder="用户名" id="userName" />
								<i class="ace-icon fa fa-user"></i>
							</span>
						</label>
						<label class="block clearfix">
							<span class="block input-icon input-icon-right">
								<input type="password" class="form-control" placeholder="密&nbsp;&nbsp;码" id="password" />
								<i class="ace-icon fa fa-key"></i>
							</span>
						</label>
						<label class="block clearfix">
							<div class="form-group">
								<div class="col-xs-6 no-padding">
									<span class="block input-icon input-icon-right">
										<input type="text" class="form-control" placeholder="验证码" id="varcode" />
										<i class="ace-icon fa fa-info-circle"></i>
									</span>
								</div>
								<div class="col-xs-6 no-padding-right">
									<img id="varcodeImg" src="../Content/images/spacer.gif" style="cursor: pointer;" height="34" width="140" alt="验证码" title="点击刷新验证码">
								</div>
							</div>
						</label>
						<div class="space"></div>
						<div class="clearfix">
							<button type="button" id="loginBtn" class="width-35 pull-right btn btn-sm btn-primary">
								<i class="ace-icon fa fa-key"></i>
								<span class="bigger-110">登&nbsp;录</span>
							</button>
						</div>
						<div class="space-6"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--[if !IE]> -->
	<script src="../Content/plugins/ace/assets/js/jquery-2.1.4.min.js"></script>
	<!-- <![endif]-->
	<!--[if IE]>
    <script src="../Content/plugins/ace/assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
	<script src="../Content/js/helper.js?v=20180429"></script>
	<script src="../Content/plugins/toastr-2.1.1/toastr.js"></script>
	<script src="../Content/js/codemsg.js?v=20180502"></script>
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement) document.write("<script src='../Content/plugins/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
	</script>
	<script type="text/javascript">
		var codekey = ''; getCode();
		function getCode() {
			codekey = getUID(16);
			$('#varcodeImg').attr('src', '/Account/GetVerifyCode?key=' + codekey);
		}

		jQuery(function ($) {
			var userNameSaved = window.localStorage.getItem('username');
			if (userNameSaved != null && userNameSaved != undefined && userNameSaved != '') {
				$('#userName').val(userNameSaved);
				$('#password').focus();
			}
			else {
				$('#userName').focus();
			}

			$('#varcodeImg').on('click', function () {
				getCode();
			});

			$('#userName,#password,#varcode').on('keyup', function (e) {
				if (e.keyCode == "13" && $.trim($('#userName').val()) != '' && $.trim($('#password').val()) != '' && $.trim($('#varcode').val()) != '') {
					$('#loginBtn').click();
				}
			});

			$('#loginBtn').on('click', function () {
				var userName = $.trim($('#userName').val());
				var password = $.trim($('#password').val());
				var code = $.trim($('#varcode').val());
				if (userName == '') {
					showToastr(3, "用户名不能为空");
					$('#userName').focus();
					return;
				}
				if (password == '') {
					showToastr(3, "密码不能为空");
					$('#password').focus();
					return;
				}
				if (code == '') {
					showToastr(3, "验证码不能为空");
					$('#varcode').focus();
					return;
				}
				if (!/^\d{6}$/.test(code)) {
					showToastr(3, "验证码格式不正确");
					$('#varcode').focus();
					return;
				}
				if (userName.length < 2 || userName.length > 64) {
					showToastr(3, "用户名长度在2到64之间");
					$('#userName').focus();
					return;
				}
				if (password.length < 6 || password.length > 128) {
					showToastr(3, "密码长度在6到128之间");
					$('#password').focus();
					return;
				}
				$.ajax({
					url: '/Account/Login',
					type: 'POST',
					data: {
						name: userName,
						pwd: password,
						key: codekey,
						varcode: code
					},
					success: function (result) {
						if (result.success) {
							showToastr(1, getSysMsg(result));
							window.localStorage.setItem("username", userName);
							window.localStorage.setItem("usertoken", result.data.Token);
							window.location.href = "/html/index.html";
						} else {
							getCode();
							showToastr(2, getSysMsg(result));
							$("#loginBtn").removeAttr("disabled").html('<i class="ace-icon fa fa-key"></i><span class="bigger-110">登&nbsp;录</span>');
						}
					},
					beforeSend: function () {
						$("#loginBtn").attr("disabled", "disabled").html('<i class="ace-icon fa fa-key"></i><span class="bigger-110">登录中...</span>');
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						getCode();
						$("#loginBtn").removeAttr("disabled").html('<i class="ace-icon fa fa-key"></i><span class="bigger-110">登&nbsp;录</span>');
						showToastr(4, textStatus + "：" + errorThrown);
					}
				})
			});
		});		
	</script>
</body>

</html>